<template>
  <div class="header-main">
    <div class="title" @click="getIndexPage">
      <el-image style="width: 50px; height: 45px" :src="titleImage" />
      <span class="text" style="cursor: pointer">pilipili⚡</span>
    </div>

    <div>
      <ul class="enum">
        <li
          v-for="(item, index) in titleItem"
          :key="item"
          @click="getVideoAll(index)"
        >
          <span style="cursor: pointer">
            {{ item }}
          </span>
        </li>
      </ul>
    </div>

    <div class="input-search">
      <el-input v-model="text" placeholder="请输入关键字" style="width: 300px">
        <template #append>
          <el-button icon="Search" @click="search" />
        </template>
      </el-input>
    </div>

    <div class="user">
      <div v-if="!flag" @click="getLoginPage">
        <span style="cursor: pointer">
          <svg
            t="1652688358268"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9918"
            width="40"
            height="40"
          >
            <path
              d="M515.541449 7.082899c-280.359429 0-508.458551 228.120391-508.458551 508.458551s228.120391 508.458551 508.458551 508.458551 508.458551-228.120391 508.458551-508.458551S795.900879 7.082899 515.541449 7.082899zM515.541449 981.864196c-257.132626 0-466.301477-209.190121-466.301477-466.322747 0-257.132626 209.168851-466.322747 466.301477-466.322747s466.301477 209.190121 466.301477 466.322747S772.674075 981.864196 515.541449 981.864196zM614.574414 524.177056 614.574414 524.177056c47.751075-31.96876 79.230625-86.398604 79.230625-148.187857 0-98.437405-79.804915-178.24232-178.24232-178.24232-98.437405 0-178.24232 79.804915-178.24232 178.24232 0 61.810523 31.479551 116.219097 79.251895 148.187857-100.266622 39.519598-171.244501 137.170014-171.244501 251.453545 0 0.23397 0 0.446669 0.02127 0.659369 0 0.04254-0.02127 0.10635-0.02127 0.14889 0 15.612155 12.65563 28.246516 28.267786 28.246516 15.590885 0 21.886796-12.63436 21.886796-28.246516 0-0.340319-0.08508-0.659369-0.10635-1.020958 0.10635-118.005774 102.159649-219.995264 220.207964-219.995264 118.112124 0 220.207964 102.095839 220.207964 220.207964 0 0.14889-1.467628 29.054774 21.971875 29.054774 15.505806 0 28.076356-12.57055 28.076356-28.055086 0-0.06381-0.02127-0.12762-0.02127-0.2127 0-0.25524 0.02127-0.510479 0.02127-0.786989C785.797645 661.34707 714.798496 563.696654 614.574414 524.177056zM515.541449 510.734437c-74.402343 0-134.723968-60.321625-134.723968-134.723968 0-74.423613 60.321625-134.723968 134.723968-134.723968 74.423613 0 134.723968 60.321625 134.723968 134.723968S589.943792 510.734437 515.541449 510.734437z"
              p-id="9919"
            ></path>
          </svg>
        </span>
      </div>

      <div v-else>
        <el-dropdown>
          <div @click="getLoginPage" class="avatar">
            <span style="cursor: pointer">
              <el-image
                style="width: 50px; height: 50px"
                :src="avatar"
                fit="fill"
              />
            </span>
          </div>

          <template #dropdown>
            <el-dropdown-menu size="large">
              <el-dropdown-item icon="Stamp" @click="getUserInfoPage"
                >用户信息</el-dropdown-item
              >
              <el-dropdown-item icon="EditPen" @click="getPublishVideoPage"
                >创作中心</el-dropdown-item
              >
              <el-dropdown-item divided icon="Back" @click="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="icon" @click="getUserMessagePage">
        <span style="cursor: pointer">
          <svg
            t="1652688251120"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6275"
            width="32"
            height="32"
          >
            <path
              d="M958.359 286.941c0-64.308-52.132-116.44-116.441-116.44H181.454c-64.309 0-116.441 52.132-116.441 116.44v448.64c0 64.309 52.132 116.441 116.44 116.441h660.465c64.309 0 116.441-52.132 116.441-116.44v-448.64z m-114.545-74.485c12.06 0 23.445 3.466 33.52 8.599L530.749 549.348c-1.228 1.161-1.156 0.916-1.753 1.868-1.426 1.067-6.056 3.922-15.45 3.922-9.397 0-14.025-2.754-15.45-3.818-0.677-1.078-0.663-0.717-1.996-1.94L142.977 224.966c11.61-7.557 25.446-12.51 40.301-12.51h660.536z m72.59 524.029c0 40.857-31.731 73.583-72.59 73.583H183.277c-40.858 0-75.285-32.726-75.285-73.583V287.658c0-10.63 2.86-20.736 6.909-29.883l351.486 322.097c4.912 5.303 19.48 17.676 47.01 17.676 27.799 0 42.303-12.618 47.076-17.83l346.8-328.9c6.252 10.86 9.13 23.434 9.13 36.838v448.829z"
              p-id="6276"
            ></path>
          </svg>
        </span>
        <div>短信</div>
      </div>

      <div class="icon" @click="getUserCatrPage">
        <span style="cursor: pointer">
          <svg
            t="1652688286269"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7289"
            width="32"
            height="32"
          >
            <path
              d="M942.888817 404.536916c-9.590498-27.201757-33.74692-46.780283-63.048453-51.093359l-206.68087-30.285267-89.758344-183.564943c-12.976602-26.57758-41.010795-43.753735-71.428571-43.753735-30.341828 0-58.338247 17.176155-71.352823 43.753735l-89.796318 183.58393-206.661883 30.323041c-29.320521 4.21834-53.49573 23.777879-63.086228 51.131133-9.57171 27.618075-2.440146 57.619534 18.594793 78.295116l151.690754 149.250608-35.184545 206.813381c-4.937253 28.828654 7.888052 58.395008 32.763187 75.362904 24.326507 16.362706 56.938396 18.159688 83.137633 4.388625l179.933005-95.509045 180.046528 95.527832c11.6525 6.147832 24.723837 9.401626 37.832749 9.401626 16.154647 0 31.798641-4.766968 45.323671-13.865599 24.761612-16.892547 37.567929-46.439914 32.630876-75.268568l-35.165758-206.832168 151.709741-149.250608C945.385924 462.231999 952.517489 432.23054 942.888817 404.536916zM897.81118 455.951657l-165.783599 163.116407 38.475913 226.316158c2.496907 14.52775-3.896758 28.942177-16.551978 37.586916-12.957815 8.7017-30.436564 9.628472-44.226614 2.364597l-197.733337-104.929458-197.601027 104.891484c-13.941348 7.339624-31.439084 6.355891-44.226614-2.269861-12.78753-8.720488-19.181195-23.153702-16.684288-37.681452l38.4949-226.278183-165.764612-163.116407c-10.517469-10.328397-14.111632-25.253478-9.401426-38.854257 4.899278-13.922561 17.440975-23.948163 32.819948-26.161463l226.448468-33.236066 98.55458-201.497785c6.69646-13.695514 21.375507-22.548312 37.378857-22.548312 16.060111 0 30.739159 8.834011 37.435619 22.529525l98.535593 201.497785 226.391906 33.160517c15.360186 2.270061 27.958444 12.333438 32.838935 26.18025C911.922812 430.698179 908.328649 445.604472 897.81118 455.951657zM509.475871 359.345556c-38.740734 0-69.952972 11.822784-92.72833 35.108796-38.022021 38.873244-37.208573 95.33876-37.151811 97.741132 0.227046 10.290623 8.644739 18.462482 18.897587 18.462482 0.113523 0 0.245833 0 0.359356 0 10.422933-0.189072 18.708316-8.815023 18.557018-19.237957 0-0.435105-0.340569-43.394179 26.558593-70.690672 15.378973-15.625006 37.435619-23.532045 65.488599-23.532045 10.44192 0 18.916375-8.474454 18.916375-18.916375C528.373459 367.838997 519.917792 359.345556 509.475871 359.345556z"
              p-id="7290"
            ></path>
          </svg>
        </span>
        <div>收藏</div>
      </div>

      <div class="icon" @click="getUserRecodePage">
        <span style="cursor: pointer">
          <svg
            t="1652688172442"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5348"
            width="32"
            height="32"
          >
            <path
              d="M830.2 381.3c-17.2-40.6-41.8-77.1-73.1-108.4-31.3-31.3-67.8-55.9-108.4-73.1C606.7 182 562 173 516 173c-16.2 0-32.5 1.1-48.4 3.4-8.7 1.2-14.8 9.3-13.6 18.1 1.2 8.7 9.4 14.8 18.1 13.6 14.4-2.1 29.2-3.1 43.9-3.1 170.4 0 309 138.6 309 309S686.4 823 516 823 207 684.4 207 514c0-35.2 5.9-69.7 17.4-102.6 2.9-8.3-1.4-17.5-9.8-20.4-8.3-2.9-17.5 1.4-20.4 9.8C181.5 437.1 175 475.2 175 514c0 46 9 90.7 26.8 132.7 17.2 40.6 41.8 77.1 73.1 108.4 31.3 31.3 67.8 55.9 108.4 73.1C425.3 846 470 855 516 855c46 0 90.7-9 132.7-26.8 40.6-17.2 77.1-41.8 108.4-73.1s55.9-67.8 73.1-108.4C848 604.7 857 560 857 514c0-46-9-90.7-26.8-132.7zM258.3 314c3 2.6 6.7 3.9 10.4 3.9 4.5 0 9-1.9 12.1-5.6 22-25.5 47.7-47.1 76.6-64.2 7.6-4.5 10.1-14.3 5.6-21.9-4.5-7.6-14.3-10.1-21.9-5.6-31.8 18.9-60.2 42.7-84.4 70.8-5.9 6.8-5.1 16.9 1.6 22.6z"
              p-id="5349"
            ></path>
            <path
              d="M495 322c-8.8 0-16 7.2-16 16v192c0 4.9 2.2 9.3 5.7 12.3 2.9 3.5 7.3 5.7 12.3 5.7h192c8.8 0 16-7.2 16-16s-7.2-16-16-16H511V338c0-8.8-7.2-16-16-16z"
              p-id="5350"
            ></path>
          </svg>
        </span>
        <div>历史</div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  name: 'Header',
  data() {
    return {
      //视频分类
      titleItem: ['首页', '动漫', '娱乐', '科技'],
      //搜索值
      text: '',
      //判断用户是否登录
      flag: false,
      //标题图片
      titleImage: require('../assets/image/title.png'),

      avatar:
        'https://vcd-project.oss-cn-hangzhou.aliyuncs.com/avatar/2022/05/19/18da673d329942dcaa3013a9c89f4eaafile.jpeg',
    }
  },

  created() {
    this.checkUserIsLogin()
  },

  methods: {
    //判断用户是否登录
    checkUserIsLogin() {
      const flag = String(Cookie.get('authorization'))
      if (flag === null || flag === '' || flag === 'undefined') {
        this.flag = false
      } else {
        this.avatar = Cookie.get('avatar')
        this.flag = true
      }
    },

    //前往用户登录页
    getLoginPage() {
      if (!this.flag) {
        this.$router.push('/login')
      } else {
        this.$router.push('/user-index/user-info')
      }
    },

    //用户退出
    logout() {
      Cookie.remove('authorization')
      Cookie.remove('userId')
      Cookie.remove('mail')
      Cookie.remove('avatar')
      Cookie.remove('nickName')
      this.$router.go(0)
    },

    //前往首页
    getIndexPage() {
      const url = this.$route.path
      if (url === '/videoList' || url === '/') {
        this.$router.go(0)
        return
      }
      this.$router.push('/videoList')
      /* this.$router.go(0) */
    },

    //前往用户分类页
    getVideoAll(id) {
      if (id === 0) {
        this.getIndexPage()
        return
      }

      this.$router.push({
        path: '/video-class',
        query: {
          type: id,
        },
      })
    },
    //前往用户信息页
    getUserInfoPage() {
      this.$router.push('/user-index/user-info')
    },

    //前往发布视频页
    getPublishVideoPage() {
      this.$router.push('/user-index/publish-video')
    },

    //前往我的消息页
    getUserMessagePage() {
      this.$router.push('/user-index/user-message')
    },

    //前往我的记录页
    getUserRecodePage() {
      this.$router.push('/user-index/user-recode')
    },

    //前往我的收藏页
    getUserCatrPage() {
      this.$router.push('/user-index/user-cart')
    },

    search() {
      this.$router.push({
        path: '/video-class',
        query: {
          name: this.text,
        },
      })
    },
    //😁
    giveACue() {
      this.$notify({
        title: '😁',
        message: '该功能正在完善',
        type: 'success',
      })
    },
  },
}
</script>

<style scoped>
.header-main {
  width: 1200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: 150px;
  display: flex;
  align-items: center;
}

.title .text {
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
  color: #ff9f29;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.enum {
  width: 300px;
}

.input-search {
  width: 500px;
}
.user {
  width: 400px;
  display: flex;
  align-items: center;
}
.user .icon {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 20px;
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
}
li {
  display: inline;
  margin-right: 9px;
}
a {
  text-decoration: none;
  color: #4c387a;
}
</style>
